<template>
        <div class="zEcharts">
            <div class="map-container" id="myEcharts" ref="myEchart" style="height:100%;width:100%"></div>
        </div>
    </template>
    <script>
    export default {
        name: 'zEcharts',
        data() {
            return {
                myEchart: '',
                optionChinaMap: {},//地图数据,等待接口数据
            }
        },
        props: {
            typeFlag: {
                type: Boolean,
                default: true
            }
        },
        mounted() {
            let china = require('../assets/china.json');
            this.$echarts.registerMap('china', china)
            this.$nextTick(()=> {
                this.initEcharts();
            })
        },
        methods: {
          
            /**
             * 地图数据
            */
            randomData: function() {
                return Math.round(Math.random() * 1000);
            },
            /**
             * echarts实例话
            */
            initEcharts: function() {
                // echarts画图实例
                let chinaMapChart = null;
                // 画图区域
                chinaMapChart = this.$echarts.init(
                    document.getElementById("myEcharts"),
                   "macarons"
                );
                this.optionChinaMap = {
                    tooltip: {
                   trigger: "item"
                    },
                    legend: {
                        orient: "horizontal", //图例的排列方向
                        textStyle: { color: "#ccc" },
                        x: "left", //图例的位置
                        y: "-20000000000000",
    
                        // data: ["全国数据"]
                    },
    
                    visualMap: {
                        //颜色的设置  dataRange
                        textStyle: { color: "#ccc" },
                        x: "left",
                        y: "bottom",
                        splitList: [
                            // { start: 1500 },
                            // { start: 900, end: 1500 },
                            // { start: 310, end: 1000 },
                            // { start: 200, end: 300 },
                            // { start: 50, end: 200 },
                            { start: 0, end: 150000 }
                        ],
    show: false,
                    // text:['高','低'],// 文本，默认为数值文本
                    color: ['rgb(50,88,124)']
                    // color: [
                    //     "#5475f5",
                    //     "#9feaa5",
                    //     "#3FA7FF",
                    //     "#66E0E3",
                    //     "#FFDC5E",
                    //     "#9fb5ea"
                    // ]
                },
                roamController: {//控制地图的上下左右放大缩小
                    show: true,
                    x: 'right',
                    mapTypeControl: {
                        'china': true
                    }
                },
                series: [
                {
                    name: "全国数据",
                    type: "map",
                    mapType: "china",
                    zoom: 7.2,//地图大小
                    roam: false, //是否开启鼠标缩放和平移漫游
                    itemStyle: {
                        //地图区域的多边形 图形样式
                        normal: {
                            //是图形在默认状态下的样式
                            label: {
                            show: true,
                            textStyle: { color: "rgb(249, 249, 249)" }//地图text样式
                            }
                        },
                        emphasis: {
                            //是图形在高亮状态下的样式,比如在鼠标悬浮或者图例联动高亮时
                            label: { show: true }
                        }
                    },
                    top: "100", //组件距离容器的距离
                    data: [
                        { name: "上海", value: this.randomData() },
                        { name: "北京", value: "100" },
                        { name: "天津", value: this.randomData() },
                        { name: "重庆", value: this.randomData() },
                        { name: "河北", value: this.randomData() },
                        { name: "河南", value: this.randomData() },
                        { name: "云南", value: this.randomData() },
                        { name: "辽宁", value: this.randomData() },
                        { name: "黑龙江", value: this.randomData() },
                        { name: "湖南", value: this.randomData() },
                        { name: "安徽", value: this.randomData() },
                        { name: "山东", value: this.randomData() },
                        { name: "新疆", value: this.randomData() },
                        { name: "江苏", value: this.randomData() },
                        { name: "浙江", value: this.randomData() },
                        { name: "江西", value: this.randomData() },
                        { name: "湖北", value: this.randomData() },
                        { name: "广西", value: this.randomData() },
                        { name: "甘肃", value: this.randomData() },
                        { name: "山西", value: this.randomData() },
                        { name: "内蒙古", value: this.randomData() },
                        { name: "陕西", value: this.randomData() },
                        { name: "吉林", value: this.randomData() },
                        { name: "福建", value: this.randomData() },
                        { name: "贵州", value: this.randomData() },
                        { name: "广东", value: this.randomData() },
                        { name: "青海", value: this.randomData() },
                        { name: "西藏", value: this.randomData() },
                        { name: "四川", value: this.randomData() },
                        { name: "宁夏", value: this.randomData() },
                        { name: "海南", value: this.randomData() },
                        { name: "台湾", value: this.randomData() },
                        { name: "香港", value: this.randomData() },
                        { name: "澳门", value: this.randomData() }
                    ]
                }
                ]
            };
            chinaMapChart.setOption(this.optionChinaMap, true);
        },
        
    }
}
</script>
<style lang="stylus" scoped>
.zEcharts
    width 100%
    height 100%
</style>